<template>
    <div>
        <h1>购物车列表</h1>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in $store.state.shopcartList" :key="item._id">
                    <td><input type="checkbox" v-model="item.checked" @change="changeCheckedStatus(item._id)"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="$store.dispatch('changeNumAsync',{_id:item._id,n:-1})">-</button>
                        <input type="text" :value="item.num" @blur="changeNumInput(item._id,index)" ref="numInput">
                        <button @click="$store.dispatch('changeNumAsync',{_id:item._id,n:1})">+</button>
                    </td>
                    <td>{{item.price*item.num}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        总价:{{$store.getters.total}}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
export default {
    created(){
        this.$store.dispatch('getShopcartListAsync')
    },
    methods:{
        // changeNumInput(arg1,arg2){
        //     this.$store.dispatch('changeNumByInputAsync',{_id:arg1,n:arg2})
        // },
        changeNumInput(arg1,arg2){
            console.log('arg1',arg1);
            console.log('arg2',arg2);
            console.log('val',this.$refs.numInput[arg2].value);
            this.$store.dispatch('changeNumByInputAsync',{_id:arg1,n:this.$refs.numInput[arg2].value})
        },
        changeCheckedStatus(arg1){
           this.$store.dispatch("changeCheckedStatus",arg1)
        }
    }
}
</script>

<style>

</style>